/**
 * 审批进度弹窗
 * 
 * 参数
 * modalVisible 弹窗显示和隐藏
 * title  标题
 * onClosePress 关闭按钮
 * rowDataList 数据
 */
import React, { Component } from 'react';
import {
  ScrollView, StyleSheet, Text, View, TouchableOpacity, Image, Modal, PixelRatio
} from "react-native";
import { GLOBAL } from '../../config/global';
const scale = GLOBAL.SCALE;
const closeImg = require('../../imgs/close.png')
export class ProgressModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkIndex: 0
    }
  }

  componentWillMount() {

  }

  render() {
    let { checkIndex, emptyText } = this.state;
    let { modalVisible, title, onClosePress, rowDataList, hideAuditResultName } = this.props;
    return (
      <Modal animationType={"fade"} transparent={true} visible={modalVisible}>
        <View style={styles.modalPage}>
          <View style={styles.modalWrap}>
            <View style={styles.modalTitle}>
              {
                title && Object.prototype.toString.call(title) == '[object Array]' ?
                  title.map((item, index) => {
                    const { value, onPress } = item;
                    return (
                      <TouchableOpacity key={index} style={checkIndex == index ? styles.titleArrActive : styles.titleArr} onPress={() => {
                        onPress && onPress(item.key);
                        this.setState({ checkIndex: index, emptyText: value });
                      }}><Text style={checkIndex == index ? styles.titleArrTextActive : styles.titleArrText}>{value || ''}</Text></TouchableOpacity>
                    )
                  })
                  : <Text style={{ fontSize: 16 * scale, fontWeight: "bold" }}>{title || ''}</Text>
              }
              <TouchableOpacity style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }} activeOpacity={.6} onPress={() => {
                onClosePress && onClosePress();
                this.setState({ checkIndex: 0 });
              }}>
                <Image source={closeImg} style={{ tintColor: '#0E7FFD', width: 14 * scale, height: 14 * scale }} />
              </TouchableOpacity>
            </View>

            <ScrollView style={[styles.modalBody]}>
              {
                rowDataList && rowDataList.map((item, index) => {
                  let isWaiting = item.auditResult == null;
                  let isUnPass = item.auditResult == 0;
                  return (
                    <View key={index} style={[styles.progressItem]}>
                      {
                        index == rowDataList.length - 1 ? null : (
                          <View style={{ height: '100%', width: 1 * scale, backgroundColor: '#EBEDF0', position: 'absolute', left: 83 * scale, top: 5 * scale }}></View>
                        )
                      }
                      <View style={[styles.nodeIcon, isWaiting ? { backgroundColor: '#848A96' } : (isUnPass ? { backgroundColor: '#D0021B' } : null)]}></View>
                      <Text style={[styles.nodeStatus, isWaiting ? { color: '#959BA8' } : null]}>{item.auditResultName == null ? '待审批' : item.auditResultName || '--'}</Text>
                      <Text style={[styles.nodeTitle, isWaiting ? { color: '#959BA8' } : null]}>
                        {item.taskName || '--'}{item.taskName && item.auditStaffName ? '：' : ''}{item.auditStaffName || ''}
                      </Text>
                      {
                        item.auditLogList && item.auditLogList.length > 0 ? (
                          <View style={{ paddingLeft: 44 * scale, paddingTop: 18 * scale }}>
                            {
                              item.auditLogList.map((child, childIndex) => {
                                let childWaiting = child.auditResult == null;
                                let childUnPass = child.auditResult == 0;
                                return (
                                  <View key={childIndex} style={[{ position: 'relative' }, item.auditLogList.length - 1 == childIndex ? null : { paddingBottom: 18 * scale }]}>
                                    <View style={[styles.nodeIcon, { left: -14 * scale }, childWaiting ? { backgroundColor: '#848A96' } : (childUnPass ? { backgroundColor: '#D0021B' } : null)]}></View>
                                    <Text style={[styles.nodeStatus, { fontSize: 10 * scale, left: -60 * scale }, childWaiting == null ? { color: '#959BA8' } : null]}>{child.auditResultName == null ? '待审批' : child.auditResultName || '--'}</Text>
                                    <Text style={[styles.nodeTitle, { fontSize: 10 * scale }, childWaiting == null ? { color: '#959BA8' } : null]}>
                                      {child.taskName + ': ' || ''}{child.auditStaffName || '--'}
                                    </Text>
                                    {
                                      child.auditResult != null ? (
                                        <View>
                                          {child.remark ? <Text style={[styles.nodeInfo, { marginTop: 5 * scale }]}>备注：{child.remark || '--'}</Text> : null}
                                          <Text style={[styles.nodeInfo, { marginTop: 2 * scale }]}>{child.auditTime || '--'}</Text>
                                        </View>
                                      ) : null
                                    }
                                  </View>
                                )
                              })
                            }
                          </View>
                        ) : (
                            <View>
                              {
                                item.auditResult != null ? (
                                  <View>
                                    {item.remark ? <Text style={[styles.nodeInfo, { marginTop: 5 * scale }]}>备注：{item.remark || '--'}</Text> : null}
                                    <Text style={[styles.nodeInfo, { marginTop: 2 * scale }]}>{item.auditTime || '--'}</Text>
                                  </View>
                                ) : null
                              }
                            </View>
                          )
                      }
                      <View style={{ height: 30 * scale }}></View>
                    </View>
                  )
                })
              }
              {rowDataList && rowDataList.length == 0 ? <Text style={{ paddingLeft: 30 * scale, paddingBottom: 30 * scale }}>暂无{emptyText || '审批'}记录</Text> : null}

            </ScrollView>
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modalPage: {
    width: GLOBAL.SCREEN_WIDTH,
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, .6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalWrap: {
    width: 302 * scale,
    backgroundColor: '#fff',
    borderRadius: 4 * scale,
    overflow: 'hidden',
    paddingBottom: 10 * scale
  },
  modalTitle: {
    height: 60 * scale,
    paddingLeft: 32 * scale,
    paddingRight: 26 * scale,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  modalBody: {
    backgroundColor: 'rgb(255, 255, 255)',
    maxHeight: 328 * scale,

    paddingRight: 20 * scale,
    paddingTop: 10 * scale,
  },
  progressItem: {
    position: 'relative',
    paddingLeft: 14 * scale,
    // borderLeftWidth: 1 * scale,
    // borderLeftWidth: 1 / PixelRatio.get(),
    // borderStyle: 'solid',
    // borderColor: '#EBEDF0',
    // paddingBottom: 30 * scale,
    paddingLeft: 98 * scale,
  },
  nodeTitle: {
    fontSize: 12 * scale,
    fontWeight: 'bold',
    marginTop: -3 * scale
  },
  nodeInfo: {
    fontSize: 10 * scale,
    color: '#959BA8',
    lineHeight: 14 * scale,
  },
  nodeIcon: {
    width: 7 * scale,
    height: 7 * scale,
    backgroundColor: '#0E7FFD',
    borderRadius: 7 * scale,
    position: 'absolute',
    top: 0,
    left: 80 * scale,
  },
  nodeStatus: {
    position: 'absolute',
    fontSize: 12 * scale,
    top: -2 * scale,
    left: 30 * scale,
    minWidth: 40 * scale,
    textAlign: 'right'
  },
  titleArr: {
    width: 40 * scale,
    paddingBottom: 3 * scale,
    marginRight: 8 * scale
  },
  titleArrActive: {
    width: 40 * scale,
    paddingBottom: 3 * scale,
    marginRight: 8 * scale,
    borderBottomWidth: 2 * scale,
    borderBottomColor: '#000',
    borderStyle: 'solid'
  },
  titleArrText: {
    textAlign: 'center',
    fontSize: 16 * scale,
  },
  titleArrTextActive: {
    fontWeight: "bold",
    textAlign: 'center',
    fontSize: 16 * scale,
  }
})
